<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <meta name="viewport" content="width=https://gitee.com/zhangBo11/zhufeng_turntable_2112.git, initial-scale=1.0"> -->
    <title>lucky1</title>

    <style>
        #my-lucky {
            margin: 0 auto;

        }
    </style>
</head>

<body>
    <div id="my-lucky"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/lucky-canvas@1.7.11"></script>
<script>
    // 九宫格引入luckyGrid
    const myLucky = new LuckyCanvas.LuckyGrid('#my-lucky', {
        width: '300px',
        height: '300px',
        rows: 3,
        cols: 3,
        blocks: [{
                padding: '10px',
                background: '#869cfa'
            },
            {
                padding: '10px',
                background: '#e9e8fe'
            },
        ],
        prizes: [{
                x: 0,
                y: 0,
                fonts: [{
                    text: 0
                }],
                imgs: [{
                    src: './img/aqy.png',
                    activeSrc: './img/aqy-active.png',
                    width: '100%',
                    height: '100%'
                }]
            },
            {
                x: 1,
                y: 0,
                fonts: [{
                    text: 1
                }],
                imgs: [{
                    src: './img/aqy.png',
                    activeSrc: './img/aqy-active.png',
                    width: '100%',
                    height: '100%'
                }]
            },
            {
                x: 2,
                y: 0,
                fonts: [{
                    text: 2
                }],
                imgs: [{
                    src: './img/aqy.png',
                    activeSrc: './img/aqy-active.png',
                    width: '100%',
                    height: '100%'
                }]
            },
            {
                x: 2,
                y: 1,
                fonts: [{
                    text: 3
                }],
                imgs: [{
                    src: './img/aqy.png',
                    activeSrc: './img/aqy-active.png',
                    width: '100%',
                    height: '100%'
                }]
            },
            {
                x: 2,
                y: 2,
                fonts: [{
                    text: 4
                }],
                imgs: [{
                    src: './img/aqy.png',
                    activeSrc: './img/aqy-active.png',
                    width: '100%',
                    height: '100%'
                }]
            },
            {
                x: 1,
                y: 2,
                fonts: [{
                    text: 5
                }],
                imgs: [{
                    src: './img/aqy.png',
                    activeSrc: './img/aqy-active.png',
                    width: '100%',
                    height: '100%'
                }]
            },
            {
                x: 0,
                y: 2,
                fonts: [{
                    text: 6
                }],
                imgs: [{
                    src: './img/aqy.png',
                    activeSrc: './img/aqy-active.png',
                    width: '100%',
                    height: '100%'
                }]
            },
            {
                x: 0,
                y: 1,
                fonts: [{
                    text: 7
                }],
                imgs: [{
                    src: './img/aqy.png',
                    activeSrc: './img/aqy-active.png',
                    width: '100%',
                    height: '100%'
                }]
            },

        ],
        buttons: [{
            x: 1,
            y: 1,
            // row: 2,
            // col: 2,
            background: 'rgba(0,0,0,0)',
            imgs: [{
                src: './img/btn.png',
                width: '100%',
                height: '100%',
            }],
        }, ],
        defaultStyle: {
            background: '#b8c5f2'
        },
        start: function () {
            myLucky.play()
            setTimeout(() => {
                myLucky.stop(6)
            }, 1000)
        },
        end: function () {
            console.log(1111111111);
            alert('抽到了奖品6')
        }
    })
</script>

</html>